<template>
  <div>
    <el-button
      size="small"
      type="primary"
      class="btn"
      @click="$router.push('/home/swipemanage/swipeAdd')"
      >添加轮播图+</el-button
    >
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" align="center" width="100px" />

      <el-table-column label="图片" align="center">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img"
            :zoom-rate="1"
            :preview-src-list="[scope.row.img]"
            :initial-index="4"
            fit="cover"
            preview-teleported
          />
        </template>
      </el-table-column>

      <el-table-column prop="link" label="链接" align="center" />
      <el-table-column prop="alt" label="提示" align="center" />
      <!-- -------------------------筛选------------------------------- -->

      <!-- -------------------------删除------------------------------- -->
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除
          </el-button>-->
          <el-popconfirm
            confirm-button-text="Yes"
            cancel-button-text="No"
            icon-color="#626AEF"
            title="你确定删除吗"
            @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="bannerList.length"
      v-model:current-page="page"
      hide-on-single-page
      :page-size="3"
    />
  </div>
</template>

<script>
import { getBanner, deleteBanner } from "../../service/banner.js";
export default {
  data() {
    return {
      page: 1,
      bannerList: [],
    };
  },
  computed: {
    list() {
      return this.bannerList.slice((this.page - 1) * 3, this.page * 3);
    },
  },
  methods: {
    handleDelete(data) {
      deleteBanner(data.bannerid).then((res) => {
        this.getList();
      });
    },
    getList() {
      getBanner().then((res) => {
        this.bannerList = res.data;
      });
    },
  },

  created() {
    this.getList();
  },
};
</script>

<style scoped>
.btn {
  margin: 10px 0;
}
img {
  width: 100%;
}
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>
